<script lang="ts" setup>
import { apiBbcPriceLogs, BbcPriceLogs } from "@@/api/page/market";
import vueEcharts, { ECOption } from "@@/utils/echarts";

const bbcPriceLogs = ref<BbcPriceLogs.Res>();
/**获取折线图数据 */
async function getBBcPriceLogs() {
  const res = await apiBbcPriceLogs();
  if (!res) return;
  bbcPriceLogs.value = res;
}
const option = computed<ECOption | undefined>(() => {
  if (!bbcPriceLogs.value) return;
  return {
    grid: {
      top: "10%",
      bottom: "10%",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#4c80c7",
        },
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: bbcPriceLogs.value.times,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: bbcPriceLogs.value.prices,
        type: "line",
        areaStyle: {},
      },
    ],
  };
});
getBBcPriceLogs();
</script>

<template>
  <Ccard>
    <h3 class="T-A-C">{{ $t("bbc-jin-qi-tian-jia-ge-zou-shi") }}</h3>
    <div @touchmove.prevent>
      <vueEcharts style="height: 500rem" :option="option" />
    </div>
  </Ccard>
</template>

<style lang="less" scoped></style>
